<template>
  <van-tabbar v-model="active" active-color="#ff5f16">
    <template v-for="item in pageFooterConfig">
      <van-tabbar-item :to="item.to" :key="item.to">
        {{ item.name }}
        <template #icon="props">
          <template v-if="item.icon.startsWith('icon-')">
            <xw-icon :icon="item.icon" :active="props.active" @clickIcon="clickIcon" />
          </template>
          <template v-else>
            <van-icon :name="item.icon" />
          </template>
        </template>
      </van-tabbar-item>
    </template>
  </van-tabbar>
</template>

<script>
import pageFooterConfig from '@/config/site/pagefooter'
export default {
  data() {
    return {
      active: 0
    }
  },
  // 方案1：生命周期来完成对于初始数据的修改
  // created() {
  //   let index = this.pageFooterConfig.map(({ to }) => to).findIndex(item => new RegExp(item).test(location.pathname))
  //   this.active = index
  // },
  watch: {
    '$route.path'(nv) {
      this.active = this.pageFooterConfig.map(({ to }) => to).findIndex(item => new RegExp(item).test(nv))
    }
  },
  computed: {
    pageFooterConfig() {
      return pageFooterConfig
    }
  },
  methods: {
    clickIcon(index) {
      // console.log(index)
    }
  }
}
</script>

<style lang="scss" scoped></style>
